<template>
  <div class="measure-measure">
    <!-- 头部 -->
    <ContentTitle :info="ctInfo">
      <el-button
        type="primary"
        size="small"
        style="height: 40px"
        @click="handleAdd"
      >
        新增测量
      </el-button>
    </ContentTitle>

    <!-- 列表 -->
    <el-table class="mt-5" stripe border :data="list" style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="100">
      </el-table-column>

      <el-table-column align="center" prop="id" label="编号" width="200">
      </el-table-column>
      <el-table-column
        :formatter="formatTime"
        align="center"
        prop="cTime"
        label="创建时间"
      >
      </el-table-column>
      <el-table-column align="center" prop="name" label="测量类型名称">
      </el-table-column>
      <el-table-column align="center" prop="unit" label="测量类型单位">
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            :loading="scope.row.loading"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增对话框 -->
    <el-dialog
      :title="editing ? '编辑测量类型' : '新增测量类型'"
      :visible.sync="show"
      width="30%"
      center
    >
      <!-- 对话框的内容 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item v-if="form.id" label="测量编号">
          <el-input
            disabled
            v-model="form.id"
            placeholder="请输入测量名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="测量名称">
          <el-input clearable v-model="form.name" placeholder="请输入测量名称"></el-input>
        </el-form-item>
        <el-form-item label="测量单位">
          <el-input clearable v-model="form.unit" placeholder="请输入测量单位"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading"
            >立即提交</el-button
          >
          <el-button @click="show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle";
// 导入封装后的请求方法
import {
  $measurementList,
  $measurementAdd,
  $measurementEdit,
  $measurementDel,
} from "@/api/index";
export default {
  components: {
    ContentTitle,
  },

  data() {
    return {
      currIndex: -1,  // 被编辑的对象的下标
      editing: false, // 是否是在编辑
      show: false, // 显示或因此新增对话框
      loading: false, // 新增时的loading
      form: {
        name: "",
        unit: "", // 单位
      }, // 新增表单
      ctInfo: {
        type: "测量",
        text: "测量类型的增删改查",
        msg: "展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
      },

      list: [
        // {
        //   id: "460000199111200643",
        //   cTime: 1647179599494,
        //   uTime: 1647179599494,
        //   name: "光照",
        //   unit: "lx",
        // },
      ],
    };
  },

  created() {
    this.getList();
  },

  methods: {
    // 立即提交
    onSubmit() {
      if (this.editing) {
        // 编辑
        let data = {
          id: this.form.id,
          name: this.form.name,
          unit: this.form.unit,
        };
         $measurementEdit(data).then(res=> { 
           console.log(res.data);
           this.show = false;
           // this.list[this.currIndex] = res.data; // 数据不生效
          // 数组方法: pop, push, splice...可以触发改变 
          this.list.splice(this.currIndex,1,this.form);  
         })
      } else {
        // 新增
        let params = {
          name: this.form.name,
          unit: this.form.unit,
        };
        // 发请求之前, 启动loading
        this.loading = true;
        $measurementAdd(params)
          .then((res) => {
            // 隐藏对话框
            this.show = false;
            // 把数据添加到列表的前面
            this.list.unshift(res.data);
            // this.list.push(res.data); // 插到后面
            // 关闭loading
            this.loading = false;
          })
          .catch((err) => {
            // todo
            this.loading = false;
          });
      }
    },

    // 显示对话框
    handleAdd() {
      this.editing = false;
      this.show = true;
      this.form = {};
    },
    // 显示对话框
    handleEdit(index, row) {
      this.currIndex = index;
      this.editing = true;
      this.show = true;
      // 使用深拷贝, 让this.form和row是两个不同的对象
      this.form = { ...row };
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          id: row.id,
        };
        row.loading = true;
        $measurementDel(params)
          .then((res) => {
            row.loading = false;
            // 移除数组里对应的对象
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })

          .catch((err) => {
            row.loading = false;
            // todo
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          });
      });
    },
    // 获取列表
    getList() {
      $measurementList().then((res) => {
        this.list = res.data.map((item) => {
          return {
            ...item,
            loading: false,
          };
        });
      });
    },
  },
};
</script>